@use '@angular/material' as mat;

@mixin inverse($primary, $bg, $text, $contrast, $form) {
  background: $bg;
  color: $text;

  a {
    color: $text;
    &:hover {
      color: $contrast;
    }
  }
  .mat-mdc-subheader {
    color: $contrast;
  }
  .mat-mdc-list-item,
  .mat-icon,
  .mdc-list-item__primary-text {
    color: $text;
  }
  .mat-accordion {
    .mat-mdc-list a {
      color: $text;
    }
    .mat-expansion-panel {
      background-color: transparent;
      color: $text;
    }
    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
      .mat-expansion-panel-header:hover {
      background-color: transparent;
    }
    .mat-expansion-panel-header-description,
    .mat-expansion-indicator::after {
      color: inherit;
    }
    .mat-expansion-panel-header-title {
      color: $text;
    }
  }
  .item-header {
    color: $contrast;
  }
  .mat-form-field-appearance-outline {
    .mdc-floating-label {
      color: mat.m2-get-color-from-palette($primary, default-contrast, 0.5);
    }
  }
  .social {
    .item {
      border: 1px solid $text;
      color: $text;
      border-color: $text;
      &:hover {
        border-color: $contrast;
        background-color: #eee;
        .mat-icon {
          color: mat.m2-get-color-from-palette($primary);
        }
      }
    }
  }
  .footer-bottom {
    background-color: #212121;
    a {
      color: $text;
      &:hover,
      &:focus {
        color: $contrast;
      }
    }
  }
  &.space-between-footer {
    .mat-divider {
      border-color: rgba($text, 0.5);
    }
  }

  .mat-form-field-label {
    color: $text;
  }
}

@mixin footer-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $text-base: mat.m2-get-color-from-palette($foreground, text, 0.75);

  $inverse-bg: #282828;
  $inverse-text: #9e9e9e;
  $inverse-text-contrast: #fff;
  $inverse-form: #4c4c4c;

  $inverse-bg-light: mat.m2-get-color-from-palette(
    $background,
    status-bar,
    0.6
  );
  $inverse-text-light: $text-base;
  $inverse-text-contrast-light: mat.m2-get-color-from-palette(
    $foreground,
    text,
    0.6
  );
  $inverse-form-light: mat.m2-get-color-from-palette($foreground, text, 0.1);
  .footer {
    .footer-light {
      background-color: mat.m2-get-color-from-palette($background, card);

      a {
        color: $text-base;

        &:hover,
        &:focus {
          color: mat.m2-get-color-from-palette($primary);
        }
      }

      .footer-bottom {
        position: relative;
        color: mat.m2-get-color-from-palette($foreground, text, 0.6);
        background-color: mat.m2-get-color-from-palette(
          $background,
          background
        );
        z-index: 10;
      }

      .mdc-list-item__content {
        color: $text-base;

        span {
          &:hover {
            cursor: pointer;
            color: mat.m2-get-color-from-palette($primary);
          }
        }
      }

      .mat-expansion-panel {
        background-color: transparent;
        color: $text-base !important;
      }

      .mat-expansion-panel-header-title {
        color: $text-base !important;
      }

      .mat-expansion-panel:not([class*='mat-elevation-z']) {
        box-shadow: none !important;
      }

      .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
        .mat-expansion-panel-header:hover {
        background-color: transparent !important;
      }
    }

    .shape-inverse {
      color: $inverse-bg;
    }

    .shape-inverse-light {
      color: $inverse-bg-light;
    }

    .footer-inverse {
      @include inverse(
        $primary,
        $inverse-bg,
        $inverse-text,
        $inverse-text-contrast,
        $inverse-form
      );
    }

    .footer-inverse-light {
      @include inverse(
        $primary,
        $inverse-bg-light,
        $inverse-text-light,
        $inverse-text-contrast-light,
        $inverse-form-light
      );
    }

    .fix-bar {
      background-color: mat.m2-get-color-from-palette($primary, 0.92);
      .item,
      .item a {
        color: mat.m2-get-color-from-palette($primary, default-contrast);
      }
      .item {
        border-bottom: 1px solid
          mat.m2-get-color-from-palette($foreground, divider);
        &:hover,
        &:focus {
          background-color: mat.m2-get-color-from-palette($primary);
        }
        &:last-child {
          border-bottom: 0;
        }
        .fix-bar-popup {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
          .fix-bar-popup-content {
            background-color: mat.m2-get-color-from-palette($background, card);
          }
        }
      }
    }
  }
  #go-to-top {
    background: mat.m2-get-color-from-palette($accent);
    color: mat.m2-get-color-from-palette($accent, default-contrast);
    &:hover {
      background: mat.m2-get-color-from-palette($accent, text, 0.7);
      transition: all 0.2s ease-in;
    }
  }
}
